// 方式一：replace()
// function template(str){
//     return function(obj){
//         for(let key in obj){
//             let reg=new RegExp(`{{\\s*${key}\\s*}}`, 'g');
//             str=str.replace(reg,obj[key])
//         }
//         return str;
//     }
// }


// 方式二：slice()
// function template(str) {
//     return function (obj) {
//         while (true) {
//             let l = str.indexOf("{{")
//             let r = str.indexOf("}}")
//             if (l == -1 || r == -1||l>r) {
//                 break
//             }
//             let str1 = str
//             let s = str1.slice(l + 2, r).trim()
//             str = str.slice(0, l) + obj[s] + str.slice(r + 2)
//         }
//         return str

//     }
// }


// replace
// function template(str) {
//   return function(obj) {
//     for (let key in obj) {
//       let reg = new RegExp(`{{\\s*${key}\\s*}}`, 'g')
//       str = str.replace(reg, obj[key])
//     }
//     return str
//   }
// }


// function template(str) {
//   return function (obj) {

//     while (true) {
//       let l = str.indexOf("{{")
//       let r = str.indexOf("}}")
//       if (l == -1 || r == -1 || l > r) {
//         break
//       }
//       let str1 = str
//       let s = str1.slice(l + 2, r).trim()
//       str = str.slice(0, l) + obj[s] + str.slice(r + 2)

//     }
//     return str

//   }
// }

//方式三：vue源码
function template(str) {
    return function (obj) {
        let arr = []
        let reg = new RegExp(`{{\\s*(.+?)\\s*}}`)  // {{ xxxx }}
        while (str.length) {
            let res = reg.exec(str)
            if (res) {
                let noMatch = str.slice(0, res.index)
                str = str.slice(res.index)
                arr.push(`_s('${noMatch}')`)

                arr.push(`_getValue('${res[1]}')`)
                str = str.slice(res[0].length)
            } else {
                arr.push(`_s('${str}')`)
                str = ''
            }
        }

        obj._getValue = function (key) {
            return this[key]
        }

        obj._s = function (val) {
            if (typeof val === 'object') return JSON.stringify(val)
            return val
        }


        let code = arr.join('+')
        console.log(code);
        let render = new Function(`with(this){return _s(${code})}`)

        let template = render.call(obj)

        return template
    }
}


var tpl = template('<p>hello there {{ name }} {{age}}</p>')
let res = tpl({ age: 18, name: 'Tom' })
console.log(res);
// <p>hello there Tom Tom</p>
var tpl = template('<p>hello there {{ name }} is {{age}} years old</p>')
let res = tpl({ name: 'Tom', age: 19 })
console.log(res); 